<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <title></title>
    <style>
        #page1Box{
            height: 100vh;
        }
    </style>
</head>

<body>
<div class="weui-tab" id="page1Box">
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <h1>页面一</h1>
            <h1>页面一</h1>
            <h1>页面一</h1>
            <h1>页面一</h1>
            <h1>页面一</h1>
            <h1>页面一</h1>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
            <h1>页面二</h1>
        </div>
        <div id="tab3" class="weui-tab__bd-item weui-tab__bd-item--active">
            <h1>页面三</h1>
        </div>
        <div id="tab4" class="weui-tab__bd-item">
            <h1>页面四ting</h1>
        </div>
    </div>
<!--    <div class="weui-tabbar">-->
<!--        <a href="#tab1" class="weui-tabbar__item weui-bar__item&#45;&#45;on">-->
<!--            <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
<!--            <div class="weui-tabbar__icon">-->
<!--                <img src="./images/icon_nav_button.png" alt="">-->
<!--            </div>-->
<!--            <p class="weui-tabbar__label">尚街</p>-->
<!--        </a>-->
<!--        <a href="#tab2" class="weui-tabbar__item">-->
<!--            <div class="weui-tabbar__icon">-->
<!--                <img src="./images/icon_nav_msg.png" alt="">-->
<!--            </div>-->
<!--            <p class="weui-tabbar__label">分类</p>-->
<!--        </a>-->
<!--        <a href="#tab3" class="weui-tabbar__item">-->
<!--            <div class="weui-tabbar__icon">-->
<!--                <img src="./images/icon_nav_article.png" alt="">-->
<!--            </div>-->
<!--            <p class="weui-tabbar__label">广场</p>-->
<!--        </a>-->
<!--        <a href="#tab4" class="weui-tabbar__item">-->
<!--            <div class="weui-tabbar__icon">-->
<!--                <img src="./images/icon_nav_cell.png" alt="">-->
<!--            </div>-->
<!--            <p class="weui-tabbar__label">我的</p>-->
<!--        </a>-->
<!--    </div>-->
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
</body>
<script>
    window.onload = function(){
        resizeElementHeight(document.body)
    }
    function resizeElementHeight(element) {
        var height = 0;
        var body = window.document.body;
        if (window.innerHeight) {
            height = window.innerHeight;
        } else if (body.parentElement.clientHeight) {
            height = body.parentElement.clientHeight;
        } else if (body && body.clientHeight) {
            height = body.clientHeight;
        }
        element.style.height = ((height - element.offsetTop) + "px");
    }
    $(window).scroll(

        function() {
            console.log('---')
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                let data = ' <h1>页面一</h1>'
                setTimeout(()=>{
                    for (let i = 0; i<=10;i++){
                        $("#page1Box").append(data)
                    }
                },1000)
            }
        });


</script>
</html>